<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-tabs v-model="tabType" type="card" @tab-click="handleClick">
        <el-tab-pane label="学生采集" name="0"></el-tab-pane>
        <el-tab-pane label="区角采集" name="1"></el-tab-pane>
        <el-tab-pane label="学生点评" name="2"></el-tab-pane>
      </el-tabs>
      <tips optionTemplate="cornerMaterial"></tips>
      <div class="search-line" v-if="!Number(tabType) || Number(tabType)==1">
        <div class="search-list-line" v-if="!Number(tabType)">
          <div class="search-list">
            <span class="search-list-title">班级选择：</span>
            <div class="search-list-content">
              <component
                  v-bind:is="item.propertyType"
                  :property.sync="item"
                  v-for="(item, index) in getPower"
                  :key="index"
                  @updateVal="updateVal"
              ></component>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">学生姓名：</span>
            <div class="search-list-content">
              <el-input v-model="searWord.student_name" placeholder="学生姓名" size="small" class="w-140 mr-10"></el-input>
            </div>
          </div>
        </div>
        <div class="search-list-line">
          <div class="search-list">
            <span class="search-list-title">采集时间：</span>
            <div class="search-list-content">
              <el-date-picker
                  v-model="valueText"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  size="small"
                  :picker-options="pickerOptions1"
                  class="mr-10">
              </el-date-picker>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">区角名称：</span>
            <div class="search-list-content">
              <v-selectpage :data="cornerlist" key-field="id" show-field="name" class="form-control w-200"
                            v-model="searWord.corner_id" @values="tagsFn($event)" placeholder="选择区角"
                            title="选择区角" ref="cornerSelect"></v-selectpage>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">采集标签：</span>
            <div class="search-list-content">
              <!--            :multiple="true"-->
              <v-selectpage :data="selectTipslist" key-field="id" show-field="name" class="form-control w-200"
                            v-model="searWord.tag_ids" @values="tagsFn($event)" placeholder="选择采集标签"
                            title="选择采集标签" ref="tagSelect"></v-selectpage>
            </div>
          </div>
        </div>
        <div class="search-list">
          <div class="search-list-left" v-if="Number(tabType)==1">
            <span class="search-list-title">采集类型：</span>
            <div class="search-list-content">
              <el-radio-group v-model="radio">
                <el-radio :label="0">全部</el-radio>
                <el-radio :label="1">图片文字</el-radio>
                <el-radio :label="2">视频文字</el-radio>
              </el-radio-group>
            </div>
          </div>
          <div class="search-list-right">
            <el-button type="primary" @click.native="searchBtn('search')" size="small"><i class="el-icon-search"></i>搜索
            </el-button>
            <el-button @click.native="searchBtn('refresh')" size="small"><i class="el-icon-refresh"></i>重置刷新</el-button>
          </div>
        </div>
      </div>
      <div class="search-line" v-if="Number(tabType)==2">
        <div class="search-list-line">
          <div class="search-list">
            <span class="search-list-title">班级：</span>
            <div class="search-list-content">
              <component
                  v-bind:is="item.propertyType"
                  :property.sync="item"
                  v-for="(item, index) in getPower"
                  :key="index"
                  @updateVal="updateVal"
              ></component>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">学生姓名：</span>
            <div class="search-list-content">
              <el-input v-model="searWord.student_name" placeholder="学生姓名" size="small" class="w-140 mr-10"></el-input>
            </div>
          </div>
          <div class="search-list">
            <span class="search-list-title">区角名称：</span>
            <div class="search-list-content">
              <v-selectpage :data="cornerlist" key-field="id" show-field="name" class="form-control w-200"
                            v-model="searWord.corner_id" @values="tagsFn($event)" placeholder="选择区角"
                            title="选择区角" ref="cornerSelect"></v-selectpage>
            </div>
          </div>
        </div>
        <div class="search-list">
          <!--          <div class="search-list-left">-->
          <!--          </div>-->
          <!--          <div class="search-list-right">-->
          <el-button type="primary" @click.native="searchBtn('search')" size="small"><i class="el-icon-search"></i>搜索
          </el-button>
          <el-button @click.native="searchBtn('refresh')" size="small"><i class="el-icon-refresh"></i>重置刷新</el-button>
          <!--          </div>-->
        </div>
      </div>
      <studentCollection v-if="!Number(tabType)" :arryList="arryList" :tableoption="tableoption"
                         @showvideo="showVideoSrc" @downs="downs"></studentCollection>
      <teachCollection v-if="Number(tabType)==1" :arryList="arryList" :tableoption="tableoption"
                       @showvideo="showVideoSrc" @downs="downs"></teachCollection>
      <comment v-if="Number(tabType)==2" :arryList="arryList" :tableoption="tableoption" @downs="downs"
               @getCornerFn="getCornerFn"></comment>
      <evaluating v-if="Number(tabType)==3" :arryList="arryList" :tableoption="tableoption"></evaluating>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
      <activeVideoDialog :videosrcCheck="videosrcCheck" :visible.sync="dialogvideoVisible"></activeVideoDialog>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import studentCollection from "./commentCollection/studentCollection";
import teachCollection from "./commentCollection/teachCollection";
import comment from "./commentCollection/comment"
import evaluating from "./commentCollection/evaluating";
import {cornerDetail} from '@/api/admin/corner.js'
import {mapGetters} from "vuex";

export default {
  components: {
    studentCollection,
    teachCollection,
    comment,
    evaluating
  },
  data() {
    return {
      arryList: [],
      valueText: [],
      cornerlist: [],
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now()//  - 8.64e7
        }
      },
      selectTipslist: [],
      radio: 0,
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      // 搜索
      searWord: {
        corner_id: '',
        tag_ids: '',
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: '',
        student_name: ''
      },
      videosrcCheck: '',
      dialogvideoVisible: false,
      tabType: 0,
      tabLine: 0,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  computed: {
    ...mapGetters(['configData']),
  },
  created() {
    this.InitFn()
    this.getTagsFn()
    this.cornerAllFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      console.log('configData', this.configData) // video_url
      // 参数 corner_id tag_ids type start_time end_time
      let optin = JSON.parse(JSON.stringify(this.searWord));
      let url = this.api.corner.gather; // 区角采集
      if (Number(this.radio) !== 0) {
        optin.type = Number(this.radio) === 1 ? 0 : 1
      }
      // 学生采集
      if (!Number(this.tabType)) {
        url = this.api.corner_comment_index
      }
      // 学生点评
      if (Number(this.tabType) === 2) {
        url = this.api.corner.nowComment
      }
      optin.p = this.page.pageindex
      if (!url) {
        return
      }
      // let data = await this.$fetch(Number(this.tabType) ? this.api.corner.gather : this.api.corner_comment_index, optin);
      let data = await this.$fetch(url, optin);
      // 0 学生采集 1 区角采集 2 学生点评
      let list_ = this.$deepCopy(data.list.data)
      for (let row of list_) {
        row.create_time = row.create_time.split(' ')[0];
        if (Number(this.tabType) === 1) {
          row.collectPic = row.url ? row.url.split(',') : [];
        } else {
          row.collectPic = row.pic ? row.pic.split(',') : [];
          if(row.collectPic.length){
            for(let index in row.collectPic){
              let item = row.collectPic[index]
              if(item.indexOf('://')==-1){
                item = `${this.configData.video_url}${item}`
                this.$set(row.collectPic, index, item)
              }
            }
          }
          if(row.video && row.video.indexOf('://')==-1){
            row.video = `${this.configData.video_url}${row.video}`
          }
        }
      }
      this.arryList = list_
      this.page.total = data.list.total
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    // 搜索
    searchBtn(option) {
      this.page.pageindex = 1;
      if (option === 'refresh') {
        if (Number(this.tabType) !== 3) {
          this.$refs.cornerSelect.remove();
        }
        if (Number(this.tabType) !== 2 && Number(this.tabType) !== 3) {
          this.$refs.tagSelect.remove();
        }

        this.searWord.corner_id = '';
        this.searWord.student_name = '';
        this.searWord.tag_ids = '';
        this.searWord.start_time = '';
        this.searWord.end_time = '';
        this.valueText = [];
        this.radio = 0;
        this.searWord.class_id = ''
        this.searWord.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
      } else {
        if (this.valueText && this.valueText.length) {
          this.searWord.start_time = this.valueText[0]
          this.searWord.end_time = this.valueText[1]
        } else {
          this.searWord.start_time = ''
          this.searWord.end_time = ''
        }
      }
      this.InitFn()
    },
    tagsFn(option) {
      console.log(option)
    },
    async getTagsFn() {
      let data = await this.$fetch(this.api.corner.comment.tagsIndex, {});
      console.log('dataloi:', data)
      this.selectTipslist = data.list.data
    },
    async cornerAllFn() {
      let data = await this.$fetch(this.api.admin_corner_index, {p: 0});
      this.cornerlist = data.list
    },
    showVideoSrc(videoSrc) {
      this.videosrcCheck = videoSrc
      this.dialogvideoVisible = true
    },
    handleClick() {
      // tabLine
      if (Number(this.tabLine) !== Number(this.tabType)) {
        this.tabLine = this.tabType
        this.page.pageindex = 1
        this.arryList = []
        this.searWord.corner_id = '';
        this.searWord.student_name = '';
        this.searWord.tag_ids = '';
        this.searWord.start_time = '';
        this.searWord.end_time = '';
        this.valueText = [];
        this.radio = 0;
        this.searWord.class_id = ''
        this.searWord.section_id = ''
        let newGetPower = this.getJson(this.getPower)
        newGetPower['section_id'].valueText = '';
        newGetPower['section_id'].child[0].valueText = '';
        this.getPower = newGetPower
        this.InitFn()
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searWord[option.select[i].name] = option.select[i].valueText
          } else {
            this.searWord[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    downs(imgsrc) {
      let alink = document.createElement("a");
      // alink.href = openBASE_URL('http')+url;
      alink.download = "123"; // 图片名
      alink.href = imgsrc;
      alink.click();
    },
    getCornerFn(option) {
      console.log('请求区角详情', option)
      cornerDetail({id: option.row.corner_id}).then(res => {
        let list = this.arryList[option.index]
        let a = JSON.parse(list.list)
        // "[{"items_id":2,"domain_ids":"6","name":"幼儿兴趣","evaluate_id":192,"evaluate":"水平II","score":"0.2"},{"items_id":48,"domain_ids":"9,10,11,12","name":"主题确定","evaluate_id":193,"evaluate":"水平III","score":"0.3"},{"items_id":49,"domain_ids":"8,9,10","name":"场景布置","evaluate_id":192,"evaluate":"水平II","score":"0.2"},{"items_id":50,"domain_ids":"6,7,9","name":"角色选择","evaluate_id":194,"evaluate":"水平IV","score":"0.4"},{"items_id":51,"domain_ids":"6,7,8,9,10","name":"角色扮演","evaluate_id":193,"evaluate":"水平III","score":"0.3"},{"items_id":52,"domain_ids":"6,7,8,9,11","name":"游戏内容、情节","evaluate_id":193,"evaluate":"水平III","score":"0.6"},{"items_id":14,"domain_ids":"8,12","name":"材料选择与使用","evaluate_id":192,"evaluate":"水平II","score":"0.2"},{"items_id":6,"domain_ids":"6,7,11","name":"交流分享","evaluate_id":193,"evaluate":"水平III","score":"0.3"},{"items_id":22,"domain_ids":"6,7,12","name":"规则遵守","evaluate_id":193,"evaluate":"水平III","score":"0.3"}]"
        list.showDetail = true
        let assess = {}
        for (let item of res.vo.assess) {
          assess[item.items_id] = JSON.parse(JSON.stringify(item))
        }
        for (let item of a) {
          if (assess[item.items_id]) {
            let b = assess[item.items_id]
            if (b.fraction) {
              for (let item_fraction of b.fraction) {
                if (Number(item_fraction.id) === Number(item.evaluate_id)) {
                  item.desc = item_fraction.desc
                }
              }
            }
          }
        }
        list.list = JSON.stringify(a)
        this.$set(this.arryList, option.index, list)
      })
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
.search-line {
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  margin-bottom: 10px;
}

.search-list {
  /*border-bottom: 1px solid #f5f5f5;*/
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.search-list:last-child {
  border-bottom: none;
}

div.v-dropdown-caller.v-dropdown-caller--full-width {
  display: block !important;
}

.search-list-left {
  display: flex;
  align-items: center;
}

.search-list-line {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
}
</style>
<!--<div class="search-line">-->
<!--<div class="search-list">-->
<!--  <span class="search-list-title">区角：</span>-->
<!--  <div class="search-list-content"></div>-->
<!--</div>-->
